這篇的Switch button與前幾篇的ToggleButton很類似,
但ToggleButton為點擊後切換,而Switch則可以明顯的看出開關的移動
android:splitTrack //設定文字與開關之間的距離
android:switchMinWidth //設定開關的最小寬度
android:switchPadding //設定Switch內文字的間隔
android:switchTextAppearance //設定Switch的文字外觀
android:textOff //當按鈕沒被打開時的文字
android:textOn //當按鈕被開啟時的文字
android:textStyle //文字樣式
android:track //Switch底部的圖片
android:thumb //Switch滑動的圖片
android:typeface //設定文字樣式
簡單的範例如下:
先在activity_main.xml檔下插入一個Switch
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<Switch
android:id="@+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:showText="true"
android:text="開關燈"
android:textOff="關"
android:textOn="開"
android:textSize="30dp"
android:textStyle="bold"
android:thumb="@drawable/switchthumb"
android:track="@drawable/switchtrack" />
</LinearLayout>
如果想要變更Switch的圖案,就在drawable下新增thumb和track樣式的xml檔
thumb樣式:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<size android:height="40dp"
android:width="50dp"/>
<corners android:radius="40dp"/>
<stroke android:width="2dp"
android:color="@color/black"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<size android:height="40dp"
android:width="50dp"/>
<corners android:radius="40dp"/>
<stroke android:width="2dp"
android:color="#cdcdcd"/>
</shape>
</item>
</selector>
track樣式:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/black"/>
<corners android:radius="200dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#cdcdcd"/>
<corners android:radius="200dp"/>
</shape>
</item>
</selector>
設定好樣式後打開MainActivity.java設定打開時會跳出Toast提示目前電源開關資訊
package com.example.itt;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.Switch;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements OnCheckedChangeListener {
private Switch aSwitch;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
aSwitch = (Switch) findViewById(R.id.switch1);
aSwitch.setOnCheckedChangeListener(this);
}
@Override
public void onPointerCaptureChanged(boolean hasCapture) {
}
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
String state = compoundButton.isChecked() ? "開燈" :"關燈";
Toast.makeText(this,"電源目前狀態:"+state,Toast.LENGTH_SHORT).show();
}
}
APP成功畫面: